<template>
  <el-container class="el-root-schedule">
    <el-header class="myheader">
      <div class="headerdiv">
        <span class="curpage">{{ "当前位置：" + currentPage }}</span>
        <div class="logo-system">
          <!-- <img src="../assets/LED.png" alt="" srcset="" /> -->
          <i class="iconfont icon-screen-share"></i>
          <span class="systitle">诱导信息发布系统</span>
        </div>
        <div class="userarea">
          <el-dropdown trigger="click" size="default" @command="doCommand">
            <div class="el-dropdown-link-my">
              <el-avatar icon="el-icon-user-solid"></el-avatar>
              <span class="uname">{{ curUserName }}</span
              ><i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="color: red;" icon="el-icon-switch-button" command="logout"
                >&nbsp;退 出 登 录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container class="el-body-all">
      <el-aside :width="isCollapsed ? '100px' : '200px'">
        <div class="collapseCtrl">
          <el-switch
            @change="handleCollapse"
            :value="isCollapsed"
            active-color="#555"
            inactive-color="#13ce66"
            >s</el-switch
          >
        </div>
        <!-- background-color="#666" -->
        <el-menu
          :collapse="isCollapsed"
          background-color="#155799"
          text-color="white"
          active-text-color="#fff"
          unique-opened
          default-active="1"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>屏幕管理</span>
            </template>
            <el-menu-item index="1-1" @click="to_screenlist()">
              <i class="el-icon-monitor"></i>
              <span slot="title">屏幕</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="to_group">
              <i class="iconfont icon-group_fill"></i>
              <span slot="title">分组</span>
            </el-menu-item>
            <el-menu-item index="1-3" @click="to_status">
              <i class="iconfont icon-icon_status"></i>
              <span slot="title">状态</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>节目编辑</span>
            </template>
            <el-menu-item index="2-1" @click="to_resource">
              <i class="el-icon-upload"></i>
              <span slot="title">资源</span>
            </el-menu-item>
            <el-menu-item index="2-3" @click="to_program_text">
              <i class="iconfont icon-a-001_icon_text"></i>
              <span slot="title">文字</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-video-play"></i>
              <span>调度计划</span>
            </template>
            <el-menu-item index="3-1" @click="to_schedule_list">
              <i class="el-icon-alarm-clock"></i>
              <span slot="title">已有</span>
            </el-menu-item>
            <el-menu-item index="3-2" @click="to_schedule_edit">
              <i class="el-icon-edit"></i>
              <span slot="title">新建</span>
            </el-menu-item>
            <el-menu-item index="3-3" @click="to_log_list">
              <i class="el-icon-document"></i>
              <span slot="title">日志</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="4-1" @click="to_user_list">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户</span>
            </el-menu-item>

            <el-menu-item index="4-2" @click="to_about">
              <i class="el-icon-user-solid"></i>
              <span slot="title">about</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="home_main">
        <router-view></router-view>
      </el-main>
    </el-container>
    <footer>南京洛普股份有限公司</footer>
  </el-container>
</template>

<script scoped>
import { mapMutations, mapState } from "vuex";
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "Home",
  data() {
    return {
      curUserName: "未登录",
    };
  },
  created() {
    // this.curUserName= this.$route.params.userName;
    this.curUserName = sessionStorage.getItem("currentUser");
  },
  computed: {
    ...mapState(["currentPage", "isCollapsed"]),
  },
  components: {},
  methods: {
    ...mapMutations(["setCurrentPage"]),
    ...mapMutations(["setIsCollapsed"]),

    handleCollapse() {
      this.setIsCollapsed();
    },

    doCommand(command) {
      // console.log(command);
      if (command === "logout") {
        this.exit();
      }
    },
    exit() {
      window.sessionStorage.removeItem("Authorization");
      this.$router.replace("/login");
    },
    to_screenlist() {
      this.setCurrentPage("屏幕管理 > 屏幕");
      this.$router
        .push({
          path: "screen",
          query: { userId: "query" },
          //name: 'Screen',
          //params:{userId: params}
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_group() {
      this.setCurrentPage("屏幕管理 > 分组");
      this.$router
        .push({
          // path:'group'
          name: "Group",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_status() {
      this.setCurrentPage("屏幕管理 > 状态");
      this.$router
        .push({
          // path:'status'
          name: "Status",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_resource() {
      this.setCurrentPage("节目编辑 > 资源");
      this.$router
        .push({
          name: "Resource",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    // to_program_pic() {
    //   this.$router
    //     .push({
    //       name: "Program_pic",
    //     })
    //     .catch((err) => {
    //       console.log("error=>", err);
    //     });
    // },
    to_program_text() {
      this.setCurrentPage("节目编辑 > 文字");
      this.$router
        .push({
          name: "Resource_text",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_schedule_edit() {
      this.setCurrentPage("调度计划 > 新建");
      this.$router
        .push({
          name: "Schedule_edit",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_schedule_list() {
      this.setCurrentPage("调度计划 > 已有");
      this.$router
        .push({
          name: "Schedule_list",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_log_list() {
      this.setCurrentPage("调度计划 > 日志");
      this.$router
        .push({
          name: "Log_list",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_user_list() {
      this.setCurrentPage("用户管理 > 用户");
      this.$router
        .push({
          name: "User_list",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
    to_about() {
      this.$router
        .push({
          name: "About",
        })
        .catch((err) => {
          console.log("error=>", err);
        });
    },
  },
};
</script>
<style scoped>
/* 2021-7-22 add , 不加也可以固定, 为啥? */
/* 因为 下面的el-body-all */
.el-header {
  /* el-header 默认有padding */
  padding: 0px 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  /*  */
  color: #f1f1f1;
  /* background-color: red; */
  opacity: 0.9;
}

.headerdiv {
  /* background: linear-gradient(to left, #D7DDE8, #757F9A);  */
  background: linear-gradient(
    to right,
    #155799,
    #159957
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* justify-content: center; */
  align-items: center;
}

.headerdiv .curpage {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px dashed #eee;
  min-width: 310px;
  font-size: 20px;
  height: 100%;
  text-align: left;
  flex: 1;
}
.headerdiv .logo-system {
  flex: 3;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerdiv .logo-system .iconfont.icon-screen-share {
  /* height: 100%; */
  font-size: 60px;
  color: rgba(255, 255, 0, 0.6);
}

.headerdiv .userarea {
  flex: 1;
  /* border: 1px solid red; */
  box-sizing: border-box;
  /* background-color: red; */
  border-left: 1px dashed #ddd;
  min-width: 180px;
  /* overflow: hidden; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.headerdiv .userarea .el-avatar {
  font-size: 30px;
  background-color: transparent;
  color: rgb(15, 235, 15);
}
.headerdiv .userarea .el-dropdown-link-my {
  overflow: hidden;
  cursor: pointer;
  width: 170px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.headerdiv .userarea .el-dropdown-link-my .uname {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* border: 1px solid red; */
  color: white;
  font-size: 18px;
}

.systitle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  /* transform: scale(1); */
  transition: 1s;
  transform-origin: center;
  font-size: 40px;
  letter-spacing: 0.1em;
}

/* .systitle:hover { */
/* 谷歌浏览器bug， 变大再还原后，有透明度的白色背景，edge，firefox 没有 */
/* transform: scale(1.3); */
/* } */

/* add  this style 2021-7-22 09:14:19 */
.el-body-all {
  /* absolute fixed 都可以 */
  /* positon = fixed, 会导致elment 对话框 有一个遮罩层 
     如果用fixed,  需要在 子元素弹出框设置:modal-append-to-body='false’即可,
     但是 对话框关闭时,如果点击取消, 还有遮罩层;
  */

  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  /* bottom: 0; */
  bottom: 50px;
}

.el-header > div > span {
  font-size: 30px;
  margin-left: 30px;
}

.el-aside {
  border-radius: 5px;
  background: linear-gradient(to bottom, #155799, #155799);
}

.collapseCtrl {
  /* cursor: pointer; */
  /* color: white; */
  font-size: 40px;
  height: 50px;
  /* background-color: rgba(85,85,85,.3); */
  background-color: rgba(200, 200, 200, 0.1);
  /* font-weight: 100; */
}

.el-menu-vertical-demo {
  border-right: none;
}
.el-menu-vertical-demo.el-menu--collapse {
  width: 100px;
}

.el-submenu [class^="el-icon-"] {
  width: 40px;
}

/* 折叠时字体图标大小覆盖, 默认是24px */
.el-menu--collapse > .el-menu-item [class^="el-icon-"],
.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  width: 40px;
}

.el-menu-vertical-demo li.el-submenu.is-active {
  position: relative;
}

.el-menu-vertical-demo .el-submenu div > i {
  font-size: 40px;
}
.el-menu-vertical-demo .el-submenu div > span {
  font-size: 22px;
  /* margin-left: 10px; */
}
/* .el-menu-vertical-demo .el-submenu .el-menu-item {
  background-color: red !important;
} */

.el-menu-vertical-demo .el-submenu .el-menu-item i {
  font-size: 25px;
}
.el-menu-vertical-demo .el-submenu .el-menu-item span {
  font-size: 16px;
  margin-left: 5px;
}

.el-submenu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

.el-submenu >>> .el-submenu__title {
  display: flex;
  height: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

li.el-submenu.is-active .el-submenu__title i {
  color: rgb(255, 255, 100);
}

li.el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.26) !important;
}

li.el-submenu.is-active::after {
  /* 小绿点 */
  /* 
    content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 5px solid #2d9c6e;
  box-sizing: border-box;
  position: absolute;
  right: 10px;
  top: 10px;
  */
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #ff0;
  border-left: none;
  border-bottom: none;
  box-sizing: border-box;
  position: absolute;
  right: 1px;
  top: 0px;
}
li.el-submenu.is-active::before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  left: 0px;
  bottom: 0px;
  width: 20px;
  height: 20px;
  border: 2px solid #ff0;
  z-index: 1001;
  border-right: none;
  border-top: none;
}

/* 2021-4-27 test */
.el-root-schedule {
  height: 100%;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to bottom right, #155799, #159957);
}

.home_main {
  /* background-color: #eee; */
  display: grid;
  place-items: center center;
  padding: 5px;
}
</style>